import { Button, Card, Col, Form, Input, InputNumber, message, Row, Table } from "antd"

import "./App.css";
import { useEffect, useState } from "react";
import { invoke } from "@tauri-apps/api/core";



const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];




// const db = await Database.load('sqlite:user.db');

const App = ()=>{
    
    const [users,setUsers]= useState([])

    const addInfo =  async (formData)=>{
        console.log(JSON.stringify(formData));
        
        await invoke('add_user',{userInfo:formData}).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
        queryUserInfos();
    }


    const queryUserInfos =  async ()=>{
        await invoke('get_user').then(resp=>{
            console.log(resp);
            setUsers(resp);
        });
    }

    useEffect(()=>{
        queryUserInfos();
    },[]);


    return( 

    // <main className="container">
    <div>
        <Card title="登记">
            <Form 
            onFinish={addInfo}
            // onFinish={queryUserInfos}
            >
                <Row>
                    <Col offset={2} xs={20} sm={10} md={6} lg={6} xl={6}>
                        <Form.Item 
                        label="姓名"
                        name="name"
                        rules={[{required:true,message:"请输入姓名"}]}
                        >
                            <Input/>
                        </Form.Item>
                    </Col>

                    <Col offset={2} xs={20} sm={10} md={6} lg={6} xl={6}>
                        <Form.Item 
                        label="年龄"
                        name="age"
                        type="number"
                        rules={[{required:true,message:"请输入年龄"}]}
                        >
                            <InputNumber/>
                        </Form.Item>
                    </Col>

                    <Col offset={2} xs={20} sm={10} md={6} lg={6} xl={6}>
                        <Form.Item 
                        label="住址"
                        name="address"
                        rules={[{required:true,message:"请输入住址"}]}
                        >
                            <Input/>
                        </Form.Item>
                    </Col>

                    <Col offset={2} xs={20} sm={10} md={6} lg={6} xl={6}>
                        <Form.Item 
                        label={null}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Card>
        <Card title="人员登记表">

            <Table dataSource={users} columns={columns} rowKey={"id"} />
        </Card>
    </div>
    // </main>
    )
}

export default App;